<template>
  <div class="orderDetail">
    <el-form label-width="160px">

      <el-row>
        <el-col :span="10">
          <el-form-item label="订单号:">{{order.id}}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="创建时间:">{{order.createtime | formatDate}}</el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="开团时间:">{{promo.startTimestamp　| formatDate}}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="原价总和:">{{order.originAmount}}</el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="实际支付:">{{order.orderAmount}}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="支付状态:">{{order.payStatus == 0 ? '未支付':'已支付'}}</el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="订单状态:">{{order.orderStatus | formatStatus}}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="发货状态:">{{order.deliveryStatus == 0 ? '未发货':'已发货'}}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="姓名:">{{order.name}}</el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="手机号:">{{order.phone}}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="22">
          <el-form-item label="自提地址:">{{order.pickAddress}}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="22">
          <el-form-item label="备注:">{{order.remarks}}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="团长:">{{manager.name}}</el-form-item>
        </el-col>
      </el-row>
     
      <el-row>
        <el-col :span="10">
          <el-form-item>
            <el-button type="primary" @click="goBack()">返 回</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="split"></div>

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
      <el-table-column prop="productNumber" label="数量" align="center"></el-table-column>
      <el-table-column prop="originPrice" label="原价" align="center"></el-table-column>
      <el-table-column prop="presentPrice" label="现价" align="center"></el-table-column>
    </el-table>
 
  </div>
</template>

<script>
import api from "@/api/order";
import { formatDate } from "@/utils/date";

const SUCCESS = 0;
const LIMIT = 10;
export default {
  data() {
    return {
      id: null,
      order: {},
      promo: {},
      manager: {},
      tableData: []
    };
  },
  created() {
    this.id = this.$route.query.id;
    if (this.id) {
      this._getDetail();
    } else {
      this.$message({
        type: "warning",
        message: "获取参数失败,请返回列表页重试!"
      });
    }
  },
  filters: {
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
    formatStatus(orderStatus) {
      if (orderStatus == 0) {
        return "已创建";
      }

      if (orderStatus == 1) {
        return "已取消";
      }

      if (orderStatus == 3) {
        return "待退款";
      }

      if (orderStatus == 4) {
        return "已退款";
      }
    }
  },
  methods: {
    _getDetail() {
      api.getDetail(this.id).then(response => {
        if (response.code == SUCCESS) {
          this.order = response.data.order;
          this.promo = this.order.promo;
          this.manager = this.order.manager;
          this.tableData = this.order.orderProductList;
        }
      });
    },
    goBack() {
      this.$router.back();
    }
  }
};
</script>

<style lang="less">
.orderDetail {
  padding-bottom: 100px;

  .split {
    border-top: 1px dashed #999;
    margin: 20px 0;
  }

  .el-button {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
}
</style>